﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>生意参谋大数据可视化HTML模板</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script type="text/javascript">
    $(document).ready(function() {
        var html = $(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls = $(".wrap li").length / 2 + 1
        i = 0
        ref = setInterval(function() {
            i++
            if (i == ls) {
                i = 1
                $(".wrap ul").css({
                    marginTop: 0
                })
                $(".wrap ul").animate({
                    marginTop: -'.52' * i + 'rem'
                }, 1000)
            }
            $(".wrap ul").animate({
                marginTop: -'.52' * i + 'rem'
            }, 1000)


        }, 2400);



        var html2 = $(".adduser ul").html()
        $(".adduser ul").append(html2)
        var ls2 = $(".adduser li").length / 2 + 1
        a = 0
        ref = setInterval(function() {
            a++
            if (a == ls2) {
                a = 1
                $(".adduser ul").css({
                    marginTop: 0
                })
                $(".adduser ul").animate({
                    marginTop: -'.5' * a + 'rem'
                }, 800)
            }
            $(".adduser ul").animate({
                marginTop: -'.5' * a + 'rem'
            }, 800)


        }, 4300);








    })
</script>

<body>
    <div class="loading">
        <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1><img src="images/logo.png">生意参谋大数据可视化HTML模板</h1>
        <div class="weather"><img src="images/weather.png"><span>多云转小雨</span><span>2017-12-30</span></div>
    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 2.7rem">
                    <div class="alltitle">生意参谋</div>

                    <div class="sycm">
                        <ul class="clearfix" id="a">
                            <li>
                                <h2>1824</h2><span>今日销售额</span></li>
                            <li>
                                <h2>1920</h2><span>昨日销售额</span></li>
                            <li>
                                <h2>19%</h2><span>环比增长</span></li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix" id="b">
                            <li>
                                <h2>1824</h2><span>今日销售额</span></li>
                            <li>
                                <h2>1920</h2><span>昨日销售额</span></li>
                            <li>
                                <h2>19%</h2><span>环比增长</span></li>
                        </ul>

                    </div>
                    <script>
                         $.ajax({
                                url: "/Y/consumer", //请求地址
                                dataType: "json", //数据格式 
                                type: "get", //请求方式
                                async: true, //是否异步请求
                                success: function(res) { //如何发送成功
                                    var html = "";
                                    var st="";
                                    var data = res.data
                              html+=`<li>
                                <h2>`+data[0].cout+`</h2><span>今日销售额</span></li><li>
                                <h2>`+data[1].cout+`</h2><span>昨日销售额</span></li>
                               <li>
                                <h2>`+data[0].coutrise+`</h2><span>环比增长</span></li>`;
                                st+=`<li>
                                <h2>`+data[0].num+`</h2><span>今日销售额</span></li><li>
                                <h2>`+data[1].num+`</h2><span>昨日销售额</span></li>
                               <li>
                                <h2>`+data[0].numrise+`</h2><span>环比增长</span></li>`;
                                   
                                $("#b").html(st);
                               $("#a").html(html); //在html页面id=ulul的标签里显示html内容
                                },
                            })
                    </script>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" id="app" style="height: 2.65rem">
                    <div class="alltitle">消费占比</div>
                    <div class="pie-chart" id="pie-chart" ref="pie_chart">
                        <div class="sy" id="echarts1"></div>
                        <div class="sy" id="echarts2"></div>
                        <div class="sy" id="echarts3"></div>

                        <div class="boxfoot"></div>
                    </div>
                </div>
                <div class="boxall" style="height: 2.95rem">
                    <div class="alltitle">行业区分比例</div>
                    <div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix" id="bg">
                            <li class="pulll_left counter">12581189</li>
                            <li class="pulll_left counter">3912410</li>
                        </ul>
                    </div>
                    <script>

                  $.ajax({
                                url: "/Y/Consumption", //请求地址
                                dataType: "json", //数据格式 
                                type: "get", //请求方式
                                async: true, //是否异步请求
                                success: function(data) { //如何发送成功
                                  var html="";
                                  console.log(data);
                                html+=`<li class="pulll_left counter">`+data.data.consumptioncount+'</li> <li class="pulll_left counter">'+data.data.consumptionnum+'</li>';
                              $("#bg").html(html); 
                                },
                            })
                    </script>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">消费总金额</li>
                            <li class="pulll_left">消费总笔数</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="images/lbx.png"></div>
                    <div class="map2"><img src="images/jt.png"></div>
                    <div class="map3"><img src="images/map.png"></div>
                    <div class="map4" id="map_1"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">新增会员信息</div>
                    <div class="tabs">
                        <ul class="clearfix">
                            <li><a class="active" href="#">7天</a></li>
                            <li><a href="#">15天</a></li>
                            <li><a href="#">30天</a></li>
                        </ul>
                    </div>
                    <div class="clearfix">
                        <div class="sy" id="echarts6"></div>
                        <div class="sy" id="echarts7"></div>
                        <div class="sy" id="echarts8"></div>
                    </div>
                    <div class="addnew">
                        <div class="tit02"><span>今日新增会员列表</span></div>
                        <div class="adduser">
                            <ul class="clearfix" id="wrp">
                                <li class="clearfix"> <span class="pulll_left"><img src="images/head.jpg">1今日新增会员列表</span> <span class="pulll_right">24岁 - 女 - 广州 </span> </li>
                             
                            </ul>
                        </div>
                    </div>
                    <script>
                        $.ajax({
                                url: "/Y/vip", //请求地址
                                dataType: "json", //数据格式 
                                type: "get", //请求方式
                                async: true, //是否异步请求
                                success: function(res) { //如何发送成功
                                    var html = "";
                                    var data = res.data
                                    console.log(res);

                                    // console.log(data);
                                    for (var i = 0; i < data.length; i++) { //遍历data数组
                                        var bs = data[i];
                                        console.log(bs)
                                        html += `
                                        <li class="clearfix"><span class="pulll_left"><img src="` + bs.picture + `">` + bs.vipid + `-` + bs.name + `</span> <span class="pulll_right">` + bs.age + `岁 - ` + bs.sex + ` - ` + bs.place + ` </span> </li>`
                                    }

                                    $("#wrp").html(html); //在html页面id=ulul的标签里显示html内容
                                },
                            })
                        
                    </script>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.4rem">
                    <div class="alltitle">实时消费记录</div>
                    <div class="wrap">
                        <ul id="yhs">
                            <li>
                                <p>1李东梁-支付宝支付-120元-XXX门店</p>
                            </li>
                            
                          
                        </ul>
                    </div>
                    <script>
                        $(document).ready(function() {
                            $.ajax({
                                url: "/Y/history", //请求地址
                                dataType: "json", //数据格式 
                                type: "get", //请求方式
                                async: false, //是否异步请求
                                success: function(res) { //如何发送成功
                                    var html = "<ul>";
                                    data=res.data;
                                    console.log(data)
                                    for (var i = 0; i < data.length; i++) { //遍历data数组
                                        var ls = data[i];
                                             html += "<li><p>"+ls.name+"-"+ls.typeway+"-"+ls.money+"-"+ls.shopname+"  "+ls.datetime+"</p></li>";      
                                    }
                                    html+="</ul>";
                                    $("#yhs").html(html); //在html页面id=ulul的标签里显示html内容
                                   
                                },
                            })
                        })
                    </script>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>

    </div>
    <div class="back"></div>
    <script language="JavaScript" src="js/js.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/area_echarts.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        })
        window.addEventListener("resize", function() {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        });
    </script>
    <script type="text/javascript">
                  $.ajax({
                                url: "/Y/viptype", //请求地址
                                dataType: "json", //数据格式 
                                type: "get", //请求方式
                                async: false, //是否异步请求
                                success: function(res) { //如何发送成功
                                  data=res.data;
                                  console.log(data)

                                },
                            })
   

                            var v0=data.alluser;
                            var v1=data.vip;
                            var v2=data.cardvip;
                            var v3=data.consumervip;
        var myChart6 = echarts.init(document.getElementById('echarts6'));
        option6 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '新增会员',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v0-v1,
                    name: '老会员',
                    label: {
                        normal: {
                            formatter: function(params) {
                                return '占比' + Math.round(v1 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]

        };

        var myChart7 = echarts.init(document.getElementById('echarts7'));
        option7 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '新增领卡会员',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v0-v2,
                    name: '总领卡会员',
                    label: {
                        normal: {
                            formatter: function(params) {
                                return '占比' + Math.round(v2 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };


        var myChart8 = echarts.init(document.getElementById('echarts8'));
        option8 = {


            series: [{

                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v3,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v0-v3,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function(params) {
                                return '占比' + Math.round(v3 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function() {
            myChart6.setOption(option6);
            myChart7.setOption(option7);
            myChart8.setOption(option8);
        }, 500);
    </script>
    <script type="text/javascript">

                           $.ajax({
                                url: "/Y/sel", //请求地址
                                dataType: "json", //数据格式 
                                type: "get", //请求方式
                                async: false, //是否异步请求
                                success: function(res) { //如何发送成功
                                  data=res.data;
                                },
                            })

        var myChart1 = echarts.init(document.getElementById('echarts1'));
        var v4 = data.man;
        var v5 = data.woman;
        var v6 = v4 + v5;
        option1 = {

            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v4,
                    name: '平均单客价',
                    label: {
                        normal: {
                            formatter: v6 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, ]
            }]
        };


        var myChart3 = echarts.init(document.getElementById('echarts3')); 
        option2 = {


            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v4,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: v4 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v5,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: function(params) {
                                return '占比' + Math.round(v4 / v6 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };


        var myChart2 = echarts.init(document.getElementById('echarts2'));
        option3 = {

            series: [{

                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v5,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v5 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v4,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function(params) {
                                return '占比' + Math.round(v5 / v6 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function() {
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
        }, 500);
    </script>
    <script type="text/javascript">
         var myChart = echarts.init(document.getElementById('echarts4'));
        $.ajax({
                                url: "/Y/find", //请求地址
                                dataType: "json", //数据格式 
                                type: "get", //请求方式
                                async: false, //是否异步请求
                                success: function(data) { //如何发送成功
                                  console.log(data);
                                  var datalist = [{
            offset: [56, 48],
            symbolSize: 110,

            color: 'rgba(73,188,247,.14)',

        }, {

            offset: [30, 70],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [0, 43],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }, {
            offset: [93, 30],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [26, 19],
            symbolSize: 65,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [75, 75],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }];

        var datas = [];
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            var itemToStyle = datalist[i];
            datas.push({
                name: item.value + '\n' + item.name,
                value: itemToStyle.offset,
                symbolSize: itemToStyle.symbolSize,
                label: {
                    normal: {
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },

                itemStyle: {
                    normal: {
                        color: itemToStyle.color,
                        opacity: itemToStyle.opacity
                    }
                },
            })
        }
        option = {
            grid: {
                show: false,
                top: 10,
                bottom: 10
            },

            xAxis: [{
                gridIndex: 0,
                type: 'value',
                show: false,
                min: 0,
                max: 100,
                nameLocation: 'middle',
                nameGap: 5
            }],

            yAxis: [{
                gridIndex: 0,
                min: 0,
                show: false,
                max: 100,
                nameLocation: 'middle',
                nameGap: 30
            }],
            series: [{
                type: 'scatter',
                symbol: 'circle',
                symbolSize: 120,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        color: '#FFF',
                        textStyle: {
                            fontSize: '30'
                        }
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#F30'
                    }
                },
                data: datas
            }]

        };
        myChart.setOption(option);
        $(document).ready(function() {
            myChart.resize();

        })
        window.addEventListener("resize", function() {
            myChart.resize();
        });


                                },
                            })

       
        var plantCap = [{
            name: '工业',
            value: '222'
        }, {
            name: '农业',
            value: '115'
        }, {
            name: '互联网',
            value: '113'
        }, {
            name: '医疗',
            value: '95'
        }, {
            name: '文学',
            value: '92'
        }, {
            name: '服装',
            value: '87'
        }];
        
    </script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script type="text/javascript">
        $('.counter').countUp();
    </script>

</body>

</html>